<template>
  <div class="main-pop" v-if="show">
    <div class="pop-content" :style="{width: width, minHeight: height}">
      <div class="pop-title">
        <span>{{title}}</span>
        <span class="pop-close" @click="show=false">X</span>
      </div>
      <div class="pop-msg">
<!--内容及样式自定义-->
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RPop',
  data () {
    return {
      show: false
    }
  },
  created () {
    this.show = this.value
  },
  props: {
    'value': {default: false},
    'title': '',
    'width': {default: 0},
    'height': {default: 0}
  },
  watch: {
    value: function (newVal) {
      this.show = newVal
    },
    show: function (newVal) {
      this.$emit('input', newVal)
    }
  }
}
</script>

<style scoped lang="less">

  @keyframes pop-bg-anime {
    from {
      background: rgba(0, 0, 0, 0);
    }
  }

  @keyframes pop-content-anime {
    from {
      transform: translateX(-50%) scale(0);
    }
  }

  .main-pop {
    font-size: 12px;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    left: 0;
    top: 0;
    z-index: 98;
    @animeAct: 0.2s linear forwards;
    animation: pop-bg-anime @animeAct;

    .pop-content {
      position: fixed;
      left: 50%;
      top: 50px;
      transform: translateX(-50%) scale(1);
      background: white;
      border-radius: 3px;
      overflow: hidden;
      animation: pop-content-anime @animeAct;

      @contentPadding: 5px 15px;

      .pop-title {
        display: flex;
        justify-content: space-between;
        background: lightskyblue;
        color: white;
        font-weight: bold;
        padding: @contentPadding;

        .pop-close {
          cursor: pointer;
        }
      }

      .pop-msg {
        padding: @contentPadding;

        > * {
          margin-top: 15px;
        }

        .item-between {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
        }

        .item-center {
          display: flex;
          flex-direction: row;
          justify-content: center;
        }
      }
    }

  }

</style>
